import React from 'react';
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
import { NavLink } from 'react-router-dom';
import Page from './Page';

import styles from './index.module.less';

class Details extends React.Component {
  state = {
    value: 1,
    KindNameInfo: [
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '1', path: require('../../../asset/images/market/1.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: '废旧铅板铅皮铅块回收 废旧铅板铅皮铅块回...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '2', path: require('../../../asset/images/market/2.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '3', path: require('../../../asset/images/market/3.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '4', path: require('../../../asset/images/market/4.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '5', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '6', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '7', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '8', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '9', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '10', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '11', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
      { KindNameInfoText: 'A级外墙岩棉板厂家外墙 皮、墙保温板、A级岩...', KindNameInfoAdd: '大连市', KindNameInfoPrice: '3200元/吨', index: '12', path: require('../../../asset/images/market/5.png'), KindNameInfoNumber: '12.35吨' },
    ],
    plainOptions: [ '购买过的商铺 ( 0 ) ', '收藏过的商铺 ( 0 )' ],
    active: true,
  };
  onTabClick() {
    this.setState(prevState => ({
      active: !prevState.active,
    }));
  }
  goToProductDetails() {
    this.props.history.push({ pathname: '/commercial-tenant/product-details', state: { name: '编码' } });
  }
  render() {
    const { KindNameInfo, plainOptions, active } = this.state;
    return (
      <div className={styles.details}>
        <div className={styles.header}>
          <div className={styles.pullLeft + ' ' + styles.child1}>综合</div>
          <div className={styles.pullLeft + ' ' + styles.child2}>
            <div className={styles.pullLeft + ' ' + styles.child2_1_1}>价格</div>
            <div className={styles.pullLeft + ' ' + styles.child2_2 + ' ' + styles.child2_2_2}>
              <div className={styles.children}>+</div>
              <div className={styles.children}>+</div>
            </div>
          </div>
          <div className={styles.pullLeft + ' ' + styles.child2}>
            <div className={styles.pullLeft + ' ' + styles.child2_1 + ' ' + styles.child2_1_1}>发布日期</div>
            <div className={styles.pullLeft + ' ' + styles.child2_2 + ' ' + styles.child2_2_2}>
              <div className={styles.children}>+</div>
              <div className={styles.children}>+</div>
            </div>
          </div>
          <div className={styles.pullRight + ' ' + styles.right}>
            <i
              className={`iconfont icon-wangzhuang ${styles.icon}`}
              onClick={this.onTabClick.bind(this)}
              style={{
                display: active !== null && active ? 'block' : 'none',
              }}
            >
            </i>
            <i
              className={`iconfont icon-liebiao ${styles.icon}`}
              onClick={this.onTabClick.bind(this)}
              style={{
                display: active !== null && active ? 'none' : 'block',
              }}
            >
            </i>
          </div>
          <div className={styles.pullRight + ' ' + styles.right}>共找到( 0 )件商品</div>
          <div className={styles.pullRight + ' ' + styles.right}>
            <CheckboxGroup options={plainOptions} />
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.contented}>
            <React.Fragment>
              {
                active === true && KindNameInfo.map(KindNameInfo => {
                  return (
                    <NavLink to={{ pathname: '/commercial-tenant/product-details', state: { day: 'Friday' } }} className={styles.KindNameInfo + ' ' + styles.pullLeft} key={KindNameInfo.index}>
                      <div className={styles.img}>
                        <img src={KindNameInfo.path} alt="" />
                        <div className={styles.KindNameInfoNumber}>库存:{KindNameInfo.KindNameInfoNumber}</div>
                        <div className={styles.KindNameInfoText}>{KindNameInfo.KindNameInfoText}</div>
                      </div>
                      <div className={styles.KindNamePrice}>
                        <div
                          className={styles.KindNamePriceLeft + ' ' + styles.pullLeft}>{KindNameInfo.KindNameInfoAdd}</div>
                        <div
                          className={styles.KindNamePriceRight + ' ' + styles.pullRight}>{KindNameInfo.KindNameInfoPrice}</div>
                      </div>
                    </NavLink>
                  );
                })
              }
            </React.Fragment>
            <React.Fragment>
              {
                active === false && KindNameInfo.map(KindNameInfo => {
                  return (
                    <div className={styles.KindNameInfoTwo + ' ' + styles.pullLeft} key={KindNameInfo.index}>
                      <div className={styles.box}>
                        <div className={styles.img + ' ' + styles.pullLeft}>
                          <img src={KindNameInfo.path} alt=""/>
                        </div>
                        <div className={styles.text + ' ' + styles.pullLeft}>
                          <p>{KindNameInfo.KindNameInfoText}</p>
                          <p>副标题</p>
                          <div>
                            <span>发货地:大连市</span>
                            <span>库存量:201吨</span>
                          </div>
                        </div>
                        <div className={styles.company + ' ' + styles.pullLeft}>
                          <div className={styles.img}>
                            <img src="" alt=""/><span>大连塑料有限公司</span>
                          </div>
                          <div className={styles.address}>
                            企业地区: 辽宁省 大连市
                          </div>
                          <div className={styles.info}>
                            资质信息: <span>企业认证</span> <span>货源优质</span>
                          </div>
                        </div>
                        <div className={styles.time + ' ' + styles.pullRight}>
                          <div>
                            <span>
                              统一编码: 石棉板 xxxxxxx
                            </span>
                          </div>
                          <div>
                            3200 元/吨
                          </div>
                          <div>
                            2018年9月19日
                          </div>
                          <div>
                            查看详细信息
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })
              }
            </React.Fragment>
          </div>
          <Page></Page>
        </div>
      </div>
    );
  }
}

export default Details;
